[#ftl]
[@agileFormSlider/]
[#macro agileFormSlider]
	[@require "dijit.form.HorizontalSlider"/]	
	[@require "dijit.form.HorizontalRule"/]
	[@require "dijit.form.HorizontalRuleLabels"/]
	[@require "dijit.form.VerticalSlider"/]	
	[@require "dijit.form.VerticalRule"/]
	[@require "dijit.form.VerticalRuleLabels"/]

	[@agileWidgetIcon "agile.form.HorizontalSlider({parameters:{}})" "HorizontalSlider"]
	<div data-dojo-type="dijit.form.HorizontalSlider" style="width:100px;">
		<ol data-dojo-type="dijit.form.HorizontalRuleLabels" container="topDecoration" style="height:1.5em;font-size:20%;color:gray;">
		    <li></li><li>50%</li><li></li>
		</ol>
		<div data-dojo-type="dijit.form.HorizontalRule" container="bottomDecoration" count=11 style="height:2px;"></div>
		<ol data-dojo-type="dijit.form.HorizontalRuleLabels" container="bottomDecoration" style="height:1em;font-size:20%;color:gray;">
		    <li>0%</li><li>100%</li>
		</ol>					    
	</div>
	[/@]
	
	
	[@declare "agile.form._Slider" "agile.form._FormValueWidget" "agile._Resizable"]
		attributes:lang.delegate(agile.form._FormValueWidget.prototype.attributes,{
		       value: lang.mixin({},agile.NumberMetadata,{}),
		       minimum: lang.mixin({},agile.NumberMetadata,{}),
		       maximum: lang.mixin({},agile.NumberMetadata,{}),
		       showButtons:lang.mixin({},agile.BooleanMetadata,{
		    	   onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){	    		   
//		    		   widget.metadata(name,value);
		    		   widget.metadata(this.metadataCategory+"."+name,value);
		    		   if(value == true){
		    			   style.set(widget.decrementButton,"visibility","visible");
		    			   style.set(widget.incrementButton,"visibility","visible");	    			   
		    		   }else{
		    			   style.set(widget.decrementButton,"visibility","hidden");
		    			   style.set(widget.incrementButton,"visibility","hidden");
		    		   }
		    	   }	    	   
		       }),
		       discreteValues:lang.mixin({},agile.NumberMetadata,{}),
		       pageIncrement:lang.mixin({},agile.NumberMetadata,{}),
		       clickSelect:lang.mixin({},agile.BooleanMetadata,{}),
		       slideDuration:lang.mixin({},agile.NumberMetadata,{}),
		       intermediateChanges: lang.mixin({},agile.BooleanMetadata,{})			
		})
		
		,constructor:function(){
			lang.mixin(this._metadata,{value:0,showButtons:true,minimum:0,maximum:100,discreteValues:Infinity,pageIncrement:2,clickSelect:true,slideDuration:dijit.defaultDuration});
		}		
	[/@]

	 [#--@agileDijitDashboardIcon "form.RuleLabels({parameters:{orientation:'Horizontal',labels:[0,50,100]}})" "RuleLabels"]
	 <ol data-dojo-type="dijit.form.HorizontalRuleLabels" style="height:1em;font-size:20%;color:gray;">
	 	<li>0</li><li>50</li><li>100</li>
	 </ol>
	 [/@--]
	
	[@declare "agile.form.RuleLabels" "agile.form._FormValueWidget"]
		category:"RuleLabels Component"
		,widgetName:"RuleLabels"		
		[#local templateString][#compress]			
			<div class="agileComponent agile{widgetName}" style="width:200px;">				
				<div data-dojo-attach-point="delegateHorizontal" data-dojo-type="dijit.form.HorizontalRuleLabels" {parameters} style="height:1em;font-size:20%;color:gray;width:80%;left:10px"></div>				
				<div data-dojo-attach-point="delegateVertical" style="display:none" data-dojo-type="dijit.form.VerticalRuleLabels" {parameters} style="width:1em;font-size:20%;color:gray;height:70%;top:20px"></div>
				<div data-dojo-type='dijit.InlineEditBox' style="display:none" data-dojo-attach-point="ruleLabelsEditor">{labels}</div>				
			</div>
		[/#compress][/#local]
		,templateString:"${templateString?js_string}"
	
		,attributes:lang.delegate(agile.form._FormValueWidget.prototype.attributes,{	       
	        labels:lang.mixin({},agile.ArrayMetadata,{
	        	renderAsInnerHtml:true,	label:"labels"   
	    		,onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){
					
				}
	        	
	        	,toHtml:function(value){        		
	        		var html = "";
	        		for(var i = 0; i < value.length; i++){
	        			html += "<li>" + value[i] +"</li>";
	        		}
	        		return html;
	        	}
	        })
	        ,numericMargin:lang.mixin({},agile.NumberMetadata,{
	        	
	        })
	        ,minimum:lang.mixin({},agile.NumberMetadata,{        	
	        	        	
	        })
	        ,maximum:lang.mixin({},agile.NumberMetadata,{
	        	    		
	        })
			,"constraints.pattern":lang.mixin({},agile.TextMetadata,{
				label:"pattern"
				,onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){
//					widget.metadata(name,value);
					widget.metadata(this.metadataCategory+"."+name,value);
					widget.delegateHorizontal.constraints.pattern = value;
					widget.delegateVertical.constraints.pattern = value;
				}
				,toHtml:function(value){
	        		return "constraints.pattern:'" + value + "'";
	        	}
				,toJson:function(value){
	        		return "pattern:'" + value + "'";
	        	}
			})
			,orientation:lang.mixin({},agile.SelectMetadata,{
				dojo:false
	            ,options:{Horizontal:"Horizontal",Vertical:"Vertical"}	
				,onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){
//					widget.metadata(name,value);
					widget.metadata(this.metadataCategory+"."+name,value);
					widget.metadata("widgetName",value+"RuleLabels");					
					style.set(widget.ruleLabelsEditor.domNode,"display","none");
					if(value == "Horizontal"){
						style.set(widget.delegateHorizontal.domNode,"display","block");
						style.set(widget.delegateVertical.domNode,"display","none");
						widget.style1("width",200);
						widget.style1("height",20);
					}else{
						style.set(widget.delegateHorizontal.domNode,"display","none");
						style.set(widget.delegateVertical.domNode,"display","block");
						widget.style1("width",30);
						widget.style1("height",200);
					}
				}
	        })
		})		
		,constructor:function(){
			lang.mixin(this._metadata,{
				constraints:{pattern:"#%"}
				,minimum:0
				,maximum:1
				,numericMargin:0
				,labels:[]
			});
		}
		,startup:function(){
			this.metadata("widgetName",this.metadata("orientation")+"RuleLabels");
			
			on(this.delegateHorizontal.domNode,"ondblclick",this,function(){
				style.set(this.ruleLabelsEditor.domNode,"display","block");
				style.set(this.delegateHorizontal.domNode,"display","none");
			});
			
			on(this.delegateVertical.domNode,"ondblclick",this,function(){
				style.set(this.ruleLabelsEditor.domNode,"display","block");
				style.set(this.delegateVertical.domNode,"display","none");
			});
			
			on(this.ruleLabelsEditor,"onChange",this,function(newValue){										
				topic.publish("agile.widget.changed",this.category,"labels",newValue);					
				this.metadata("labels",newValue==""?[]:newValue.split(","));
				
				if(this.metadata("orientation") == "Horizontal"){
					style.set(this.delegateHorizontal.domNode,"display","block");
				}else{
					style.set(this.delegateVertical.domNode,"display","block");
				}
				style.set(this.ruleLabelsEditor.domNode,"display","none");
				
				//this.updatRuleLabels(this.topRuleLabels,newValue==""?null:newValue.split(","));
			});
						
			this.ruleLabelsEditor.startup();
			this.delegateHorizontal.startup();
			this.delegateVertical.startup();			
		}
	[/@]

	[@declare "agile.form.HorizontalSlider" "agile.form._Slider"]
		category:"HorizontalSlider Component"
		,widgetName:"HorizontalSlider"
		,resizeAxis:"x"	
		[#local templateString][#compress]			
		<div class="agileComponent agile{widgetName}">
			<table cellspacing="0" cellpadding="0" border="0">			
				<tr >
					<td colspan="2"></td>
					<td align="center" style="width:200">
						<div data-dojo-type='dijit.InlineEditBox' style="display:none" data-dojo-attach-point="topRuleLabelsEditor,leftRuleLabelsEditor">{topRuleLabels}</div>
						<ol data-dojo-attach-point="topRuleLabels" data-dojo-type="dijit.form.HorizontalRuleLabels" style="height:1em;font-size:20%;color:gray;width:100%">
						    <li></li><li>50</li><li></li>
						</ol>
					</td>
					<td colspan="2"></td>
				</tr>
				<tr>
					<td>
						<div class="dijitSliderDecrementIconH" data-dojo-attach-point="decrementButton"><span class="dijitSliderButtonInner">-</span></div>
					</td>
					<td colspan="3" valign="center">
						<div data-dojo-attach-point="topRule" data-dojo-type="dijit.form.HorizontalRule" count=0 style="height:2px;"></div>
						<div data-dojo-attach-point="delegate" data-dojo-type="dijit.form.HorizontalSlider" showButtons="false" style="width:200"></div>
						<div data-dojo-attach-point="bottomRule"data-dojo-type="dijit.form.HorizontalRule" count=11 style="height:2px;"></div>
					</td>					
					<td>
						<div class="dijitSliderIncrementIconH" data-dojo-attach-point="incrementButton"><span class="dijitSliderButtonInner">+</span></div>
					</td>							
				</tr>
				<tr >
					<td colspan="2"></td>					
					<td align="center" style="width:200">
						<div data-dojo-type='dijit.InlineEditBox' style="display:none" data-dojo-attach-point="bottomRuleLabelsEditor,ruleLabelsEditor2">{bottomRuleLabels}</div>
						<ol data-dojo-attach-point="bottomRuleLabels" data-dojo-type="dijit.form.HorizontalRuleLabels" style="height:1em;font-size:20%;color:gray;width:100%">
						    <li>0</li><li>100</li>
						</ol>
					</td>
					<td colspan="2"></td>
				</tr>
			</table>		
		</div>
		[/#compress][/#local]
		,templateString:"${templateString?js_string}"
		,attributes:lang.delegate(agile.form._Slider.prototype.attributes,{
			topRuleLabels:lang.mixin({},agile.TextMetadata,{})
			,bottomRuleLabels:lang.mixin({},agile.TextMetadata,{})
		})
		,constructor:function(){
			this.metadata("topRuleLabels","0,50");				
			this.metadata("bottomRuleLabels","0,100");
			//this.metadata("style.width","200");			
		}
		,startup:function(){
			this.targetResiableContainer = this.delegate.domNode;
			this.topRuleLabels.startup();
			this.topRuleLabelsEditor.startup();
			
			on(this.topRuleLabels.domNode,"ondblclick",this,function(){
				style.set(this.topRuleLabelsEditor.domNode,"display","block");
				style.set(this.topRuleLabels.domNode,"display","none");
			});
			
			on(this.topRuleLabelsEditor,"onChange",this,function(newValue){										
				topic.publish("agile.widget.changed",this.category,"topRuleLabels",newValue);					
				this.metadata("topRuleLabels",newValue);				
				style.set(this.topRuleLabelsEditor.domNode,"display","none");
				style.set(this.topRuleLabels.domNode,"display","block");		
				this.updatRuleLabels(this.topRuleLabels,newValue==""?null:newValue.split(","));
			});			
		}
		,updatRuleLabels:function(ruleLabels,labels){			
			while(ruleLabels.domNode.children.length > 0){
				ruleLabels.domNode.removeChild(ruleLabels.domNode.children[0]);
			}
			
			if(labels != null){				
				var innerHTML = '<div class="dijitRuleLabelContainer dijitRuleLabelContainerH" style="left:{percentage}%;"><div class="dijitRuleLabel dijitRuleLabelH">{label}</div></div>';
				//var innerHTML = '<div style="left:{percentage}%;display:inline"><div>{label}</div></div>';		
				array.forEach(labels,function(label,index){					
					var percentage = (index * 1.000)/value.length * 100; 
					var div = construct.create("div",{innerHTML:lang.replace(innerHTML,{percentage:percentage,label:label})});
					ruleLabels.domNode.appendChild(div.firstChild);
				});
			}
		}
	[/@]

	[@declare "agile.form.VerticalSlider" "agile.form._Slider"]
		category:"VerticalSlider Component"
		,widgetName:"VerticalSlider"
		,resizeAxis:"y"	
	[/@]

[/#macro]